import { createApp,nextTick,h,render } from 'vue'
import loginForm from '@/views/page/login/loginForm.vue'
let mountNode
let app
// doubleDialog  是否需要二级弹窗
let createMount = (opts) => {
  if (mountNode && !opts.doubleDialog) {//确保只存在一个弹窗
    document.body.removeChild(mountNode)
    mountNode = null
  }
  mountNode = document.createElement('div')
  mountNode.className = 'login-component-dialog'
  document.body.appendChild(mountNode)
  const vnode = h(loginForm, {
    ...opts,
    remove() { //传入remove函数，组件内可移除dom 组件内通过props接收x
      if(mountNode){
        document.body.removeChild(mountNode)
        mountNode = null
      }
    },
  })
  vnode.appContext = app
  render(vnode, mountNode);
}
const loginFormBox = (options = { id: Number }) => {
  options.id = options.id || 'loginFormBox_' + new Date().getTime()
  createMount(options)
}
const Modal = {
  install(Vue) {
    app = Vue._context
    Vue.config.globalProperties.$loginForm = loginFormBox;
  },
};
export default Modal;
// let div = null
// const loginFormBox = loginForm
// loginForm.install = function (data) {
//   if(div)  document.body.removeChild(div)
//   div = document.createElement('div');
//   div.setAttribute('id', 'cu-dialog-id');
//   document.body.appendChild(div);
//   let instance = createApp(loginFormBox, {data})
//   // 将组件挂载在文档碎片上
//   const vm = instance.mount(div)
//   nextTick(() => {
//     vm.init()
//   })
// }
// export default loginForm